<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="nabbar" :style="{'height': statusBarHeight + barHeight + 'px'}">
			<!-- //手机状态栏 -->
			<view class="status-bar" :style="{'height': statusBarHeight + 'px'}"></view>
			<!-- //导航栏 -->
			<view class="nabbar-box" :style="{ 'top': statusBarHeight+ 'px', 'heigth': barHeight + 'px' }">
				<view class="nabbar-cont">
					<view>个人中心</view>
				</view>
			</view>
		</view>
		<view class="top-main">
			<view class="top-color"></view>
			<image class="top-img" src="../../static/images/mine/top-img.png"></image>
			<view class="infos">
				<view class="flex head-info align">
					<image class="head-image" src="../../static/images/mine/head.png"></image>
					<view class="info">
						<view>
							<view v-if="info.douyin_status==1">抖音昵称：{{info.douyin_message.nickname}}</view>
							<view v-else-if="info.kuaishou_status==1">快手昵称：{{info.douyin_message.nickname}}</view>
							<view v-else-if="info.shipinhao_status==1">视频号昵称：{{info.douyin_message.nickname}}</view>
							<view v-else-if="info.xiaohongshu_status==1">小红书昵称：{{info.douyin_message.nickname}}</view>
							<view v-else>{{info.nickname}}</view>
							<!-- {{info.nickname}} -->
						</view>
						<view class="flex align"
							v-if="info.douyin_status==1||info.kuaishou_status==1||info.shipinhao_status==1||info.xiaohongshu_status==1">
							<view class="tab" v-if="info.douyin_status==1">抖音达人</view>
							<view class="tab" v-if="info.kuaishou_status==1">快手达人</view>
							<view class="tab" v-if="info.shipinhao_status==1">视频号达人</view>
							<view class="tab" v-if="info.xiaohongshu_status==1">小红书达人</view>
							<!-- {{info.douyin_status==1?'抖音':info.kuaishou_status==1?'快手':info.shipinhao_status==1?'视频号':'小红书'}}达人 -->
						</view>
						<view class="tab" v-else>暂未入驻达人</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="cards flex align between">
				<view class="item" @click="toUrl('/pages/task/list')">
					<view>{{total}}</view>
					<view>任务数量</view>
					<view style="color: green;">（查看任务）</view>
				</view>
				<view class="item" @click="toUrl('/pages/profile/logs')">
					<view>{{info.money}}</view>
					<view>佣金金额</view>
					<view style="color: green;">（查看日志）</view>
				</view>
				<!-- <view class="item">
					<view>516</view>
					<view>可提现数</view>
				</view> -->
			</view>
			<view class="cards cards2">
				<view class="card2-tit flex align">常用功能</view>
				<view class="flex align navs" style="flex-wrap: wrap;justify-content: flex-start;">
					<view style="width: 20%;margin-bottom: 20rpx;" @click="show = true">
						<image src="../../static/images/mine/icon1.png" mode="widthFix"></image>
						<view>佣金提现</view>
					</view>
					<view style="width: 20%;margin-bottom: 20rpx;" @click="toUrl('/pages/profile/withDrawList')">
						<image src="../../static/images/mine/icon1.png" mode="widthFix"></image>
						<view>提现列表</view>
					</view>
					<view style="width: 20%;margin-bottom: 20rpx;" @click="toUrl('/pages/task/list')">
						<image src="../../static/images/mine/icon2.png" mode="widthFix"></image>
						<view>我的任务</view>
					</view>
					<view style="width: 20%;margin-bottom: 20rpx;" @click="toUrl('/pages/resign/userList')">
						<image src="../../static/images/mine/icon2.png" mode="widthFix"></image>
						<view>达人申请</view>
					</view>
					<view style="width: 20%;margin-bottom: 20rpx;" @click="toUrl('/pages/manage/manage')">
						<image src="../../static/images/mine/icon3.png" mode="widthFix"></image>
						<view>办公台入口</view>
					</view>
					<view style="width: 20%;margin-bottom: 20rpx;" @click="toUrl('/pages/manage/manageChange')">
						<image src="../../static/images/mine/icon3.png" mode="widthFix"></image>
						<view>总账号入口</view>
					</view>
					<!-- <view @click="toUrl('/pages/login/login')">
						<image src="../../static/images/mine/icon4.png" mode="widthFix"></image>
						<view>提出登录</view>
					</view> -->
					<!-- <image @click="toUrl('/pages/task/list')" src="../../static/images/mine/icon2.png"></image>
					<image @click="toUrl('/pages/manage/manage')" src="../../static/images/mine/icon5.png"></image>
					<image @click="toUrl('/pages/login/login')" src="../../static/images/mine/icon4.png"></image> -->
				</view>
			</view>
		</view>
		<!-- 提现弹窗 -->
		<view class="showLody" v-if="show">
			<view class="sh-con">
				<view class="sh-con-tit">提现申请</view>
				<view class="tit2">提现金额</view>
				<view class="flex align price-sh">￥<input v-model="money" placeholder="请输入金额" /></view>
				<view class="flex align price-sh"><input v-model="transfer_remark" placeholder="备注" /></view>
				<!-- transfer_remark -->
				<view class="tip-show">待提现佣金：￥{{info.money}}</view>
				<view class="show-btns flex align between">
					<view @click="show=false">取消</view>
					<view @click="toDraw()">提交申请</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		userDetail,
		checkToken,
		minilogin,
		taskApplyLists,
		withDraw
	} from '@/api/apiData.js';
	// import {
	// 	requestMerchantTransfer
	// } from "@/uni_modules/uni-requestMerchantTransfer"
	export default {
		data() {
			return {
				statusBarHeight: 20,
				barHeight: 44,
				barWidth: null,
				info: '',
				total: 0,
				show: false,
				money: '',
				transfer_remark: ''
			}
		},
		onLoad() {
			let that = this;
			//通过uni自带api获取手机系统信息
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res)
					that.statusBarHeight = res.statusBarHeight; //手机状态栏高度
					let isiOS = res.system.indexOf('iOS') > -1; //是否为iOS系统
					that.barHeight = !isiOS ? 48 : 44; //导航栏高度，iOS：48，Android：44
					that.barWidth = res.windowWidth - 87; //nabbar可操作宽度 = 屏幕宽度 - 小程序右上角的胶囊宽度（87）
				}
			})
		},
		onShow() {
			let that = this;
			let token = uni.getStorageSync('token')
			if (token) {
				that.checkToken(token)
			} else {
				that.wxLogin()
			}
		},

		onReady() {

		},
		onShareAppMessage(res) {

		},
		methods: {
			toDraw() {
				let code = ''
				let that = this
				that.toWith()
				// uni.login({
				// 	provider: 'weixin',
				// 	success: function(loginRes) {
				// 		console.log(loginRes.code)
				// 		that.code = loginRes.code
				// 		that.toWith()
				// 	}
				// })
			},
			async toWith() {
				// let code = this.code
				let money = this.money
				let transfer_remark = this.transfer_remark
				if (money == '') {
					uni.showToast({
						title: '请输入金额',
						icon: 'error'
					})
					return false
				}
				if (money < 0.1) {
					uni.showToast({
						title: '金额能不少于0.1',
						icon: 'error'
					})
					return false
				}
				if (transfer_remark == '') {
					uni.showToast({
						title: '备注不能为空',
						icon: 'error'
					})
					return false
				}
				console.log(money)
				console.log(transfer_remark)
				const result = await withDraw({
					// code: code,
					transfer_amount: money,
					transfer_remark: transfer_remark
				})
				if (result.code == 1) {
					this.show = false
					uni.showToast({
						title: result.msg,
					})
					if (uni.canIUse('requestMerchantTransfer')) {
						uni.requestMerchantTransfer({
							mchId: '1670427401',
							appId: 'wx3ed48d50aa14410a',
							package: result.data.package_info,
							success: (res) => {
								// res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
								console.log('success:', res);

							},
							fail: (res) => {
								console.log('fail:', res);
								uni.showToast({
									title: res,
									icon: 'error'
								})

							},
						});
					} else {
						uni.showModal({
							content: '你的微信版本过低，请更新至最新版本。',
							showCancel: false,
						})
					}
					setTimeout(() => {
						this.getInfo()
						uni.navigateTo({
							url: '/pages/profile/withDrawList'
						})
					}, 500)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			async checkToken(token) {
				console.log(token)
				const result = await checkToken({
					token: token
				})
				console.log(result)
				if (result.code == 1) {
					this.getInfo()
				} else {
					this.wxLogin()
				}
			},
			wxLogin() {
				let that = this
				uni.getUserInfo({
					desc: '登录的数据',
					success(ures) {
						console.log(ures, '返回的用户信息');
						uni.login({
							provider: 'wechat',
							success: function(res) {
								console.log('微信登录成功', res)
								let obj = {
									code: res.code,
									encryptedData: ures.encryptedData,
									iv: ures.iv
								}
								that.obj = obj
								that.wxAppLogin()
							},
							fail: function(err) {
								console.log('微信登录失败', err)
							}
						})
					}
				})
			},
			async wxAppLogin() {
				let obj = this.obj
				const result = await minilogin(obj)
				if (result.code == 1) {
					uni.setStorageSync('token', result.data.token);
					this.getInfo()
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					});
				}
			},
			async getInfo() {
				const result = await userDetail()
				if (result.code == 1) {
					this.info = result.data
					this.getTotal()
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			toUrl(u) {
				uni.navigateTo({
					url: u
				})
			},
			async getTotal() {
				const result = await taskApplyLists({
					page: 1,
					size: 1
				})
				if (result.code == 1) {
					this.total = result.data.total
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.showLody {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.459);

		.sh-con {
			width: 80%;
			background: white;
			padding: 10rpx 40rpx;
			border-radius: 10rpx;
			font-size: 28rpx;

			.sh-con-tit {
				text-align: center;
				font-weight: bold;
				margin: 10rpx 0 10rpx;
				font-size: 30rpx;
			}

			.price-sh {
				margin: 30rpx 0;
				font-size: 36rpx;
				border-bottom: solid 1rpx gainsboro;
				padding-bottom: 20rpx;

				input {
					margin-left: 10rpx;
				}
			}

			.tip-show {
				color: gray;
			}

			.show-btns {
				padding: 60rpx 0;

				view {
					color: white;
					width: 45%;
					line-height: 2.5;
					text-align: center;
					border-radius: 10rpx;
				}

				view:nth-child(1) {
					background: grey;
				}

				view:nth-child(2) {
					background: #C91717;
				}
			}
		}
	}

	.top-main {
		position: relative;

		.top-color {
			background: #FF6543;
			height: 88rpx;
		}

		.top-img {
			width: 100%;
			height: 302rpx;
		}

		.infos {
			position: absolute;
			width: 90%;
			top: 130rpx;
			left: 5%;

			.head-info {
				color: white;
				font-size: 26rpx;

				.head-image {
					width: 160rpx;
					height: 160rpx;
					object-fit: cover;
				}

				.info {
					margin-left: 20rpx;
					line-height: 1.8;
					font-size: 32rpx;

					.tab {
						font-size: 24rpx;
						background: #73C917;
						padding: 2rpx 14rpx;
						border-radius: 26rpx;
						margin-top: 24rpx;
						width: fit-content;
					}
				}
			}


		}
	}

	.main {
		position: relative;
		top: -100rpx;
		margin: 24rpx;

		.cards {
			border-radius: 12rpx;
			background: white;
			padding: 34rpx 0;
			margin-bottom: 20rpx;

			.item {
				flex: 1;
				text-align: center;
				color: #AAAAAA;
				font-size: 16rpx;

				view:nth-child(1) {
					font-size: 48rpx;
					font-weight: bold;
					color: black;
				}
			}

			.card2-tit {
				font-size: 26rpx;
				font-weight: bold;
				padding: 14rpx 16rpx;

			}

			.navs {
				margin-top: 10rpx;
				justify-content: space-around;
				font-size: 22rpx;
				text-align: center;

				image {
					width: 40rpx;
					height: 80rpx;
				}
			}
		}

		.cards2 {
			padding: 14rpx 16rpx;
		}
	}
</style>